<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>

    const arr = [1, 2, -3, 5, -8];
    /* 如何遍历一个数组，有哪些方式？ */
    /* 方式一： */
    for (let i = 0; i < arr.length; i++) {
        console.log('  方式一：  for循环', arr[i]);
    }
    console.log('======================');

    /* 方式二：forEach */
    arr.forEach((item, index) => console.log(item, index));

    /* 方式三：for in */

    for (let index in arr) {
        console.log('  方式三：  for in循环', arr[index], index);
    }

    /* es6 新增的一种 for ... of */

    console.log('es6 新增的一种 for ... of 遍历数组');


    /* for of 遍历的时候，可以很方便的把数组的元素遍历出来，
    但是没有下标，如果要把下标也遍历出来，该如何处理呢？ */
    for (let item of arr) {
        console.log('  方式四：  for of循环', item);
    }


    /* 数组其他的 api */

    const newArr = arr.entries(); // 返回的是一个遍历器对象，可以使用for...of遍历
    // 底层的结构大致类似这样
    // const arr = [1, 2, -3, 5, -8];
    /***
     [
         {
             index:0,
             value:1
         },
         {
             index:1,
             value:2,
         },
         {
             index:2,
             value:-3
         }
         ....
     ]
     * 
     */

    /*  Array Iterator  */
    console.log(newArr);

    for (let [index, value] of newArr) {
        console.log('  方式五：  for of循环', index, value);
    }


    // arr.keys(); // 获取下标
    // arr.values(); // 获取值

    console.log('arr.keys(); // 获取下标');

    for (let key of arr.keys()) {
        console.log('  方式六：  for of循环', key);
    }

    console.log('arr.values(); // 获取值');
    for (let value of arr.values()) {
        console.log('  方式七：  for of循环', value);
    }

</script>

</html>